<template>
	<view class="page">
		<!-- 		<view class="tops">
			销售排行（从高到低）
		</view>
 -->
		<view class="search" v-if="duIndex == 0" >
			<u-search placeholder="请输入客户名称或手机号" v-model="keyword" @search="searchContent" @custom="searcClickhContent"
				@clear="clearCibtent"></u-search>
		</view>
		<view class="banner_right">
			<view class="banner_right_items" v-for="(t,i) in du" :key="i" :class="[duIndex == i ? 'jisn' : '']"
				@click="selecType(i)">
				{{t.title}}
			</view>
		</view>
		<view class="ds" v-if="duIndex == 1" >
			<mescroll-uni @init="mescrollInit" :top="duIndex == 0 ? 140 : 86" @down="downCallback" :up="upOption" @up="upCallback"
				@emptyclick="emptyClick">
				<view class="xiaoshou"v-if="duIndex == 1">
					<view class="items" v-for="(items,index) in dataList" :key="index" @click="saleInfo(items.saleId)">
						<view class="items_left" :class="[changeBgc(index+1)]">
							{{index + 1}}
						</view>
						<view class="items_right">
							<view class="items_right_t">
								<span>{{items.name ||''}}</span>
								<span style="color: #31AB3F;">{{items.share ? `${items.share * 100}%` : ''}}</span>
							</view>
							<view class="items_right_b">
								<span>进件总计：{{items.count || '0'}}</span>
								<span style="margin-left: 36rpx;">放款总额：{{items.price ? `￥${items.price}` : 0}}</span>
							</view>
						</view>
					</view>
				</view>
			</mescroll-uni>
		</view>
		
	
		<kehulist ref="kuHuRefs" v-if="duIndex == 0" :orgId="storeId"></kehulist>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import kehulist from './keHuList.vue'
	export default {
		mixins: [MescrollMixin],
		components: {
			kehulist
		},

		data() {
			return {
				storeId: null,
				price: 0,
				keyword:'',
				du: [{
					title: '客户'
				}, {
					title: '销售'
				}],
				kuHuList: [],
				duIndex: 0,
				upOption: {
					auto: false,//是否在初始化完毕之后自动执行上拉拉刷新的回调; 默认true
					noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认10,
				},
				top: "24rpx",
				pager: {
					currentPage: 1,
					maxResultCount: 10
				},
				dataList: [],
			}
		},
		onLoad(option) {
			this.storeId = option.storeId
		},
		methods: {

			async getList() {
				//获取练习列表数据
				const res = await this.$post(`/biz/statistics/xiaoshoupaihang`, {
					current: this.pager.currentPage,
					size: this.pager.maxResultCount,
					storeId: this.storeId
				})
				if (res.data.data.total >= 0) {
					if (this.pager.currentPage == 1) {
						this.dataList = []
					}
					this.dataList = res.data.data.records
				}
				this.mescroll.endBySize(res.data.data.records.length, res.data.data.total)
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				this.pager.currentPage = page.num; //在第几页
				this.pager.maxResultCount = page.size; //展示多少条数据
				this.getList()
			},
			downCallback(page) { // 下拉刷新
				this.mescroll.resetUpScroll();
			},

			saleInfo(saleId) {
				uni.navigateTo({
					url: `/pages/da_qu_duan/da_qu_xiao_shou_ke_hu?saleId=${saleId}`
				})
			},
			selecType(index) {
				this.duIndex = index;
				if (index == 0) {
					this.$refs.kuHuRefs.pager.currentPage = 1;
					this.$refs.kuHuRefs.kuHuList = []
					this.$refs.kuHuRefs.getKeHu()
				} else {
					this.$nextTick(() => {
						this.pager.currentPage = 1
						this.dataList = []
						this.getList(this.regionOrgId)
					})
				}
			},
		// 回车触发
			searchContent(e) {
				this.$refs.kuHuRefs.pager.currentPage = 1;
				this.$refs.kuHuRefs.keyword = e;
				this.$refs.kuHuRefs.orgId = this.storeId;
				this.$refs.kuHuRefs.getKeHu()
			},
			// 点击搜索触发
			searcClickhContent(e) {
				this.$refs.kuHuRefs.pager.currentPage = 1;
				this.$refs.kuHuRefs.keyword = e;
				this.$refs.kuHuRefs.orgId = this.storeId;
				this.$refs.kuHuRefs.getKeHu()
			},
			// 清空内容时触发
			clearCibtent(e) {
				this.$refs.kuHuRefs.pager.currentPage = 1;
				this.$refs.kuHuRefs.keyword = e;
				this.$refs.kuHuRefs.orgId = this.storeId;
				this.$refs.kuHuRefs.getKeHu()
			},
			changeBgc(val) {
				let bgc = ''
				if (val == 1) {
					bgc = 'chengSe'
				} else if (val == 2) {
					bgc = 'lvSe'
				} else if (val == 3) {
					bgc = 'hongSe'
				} else if (val == 4) {
					bgc = 'heiSe'
				} else if (val == 5) {
					bgc = 'ziSe'
				} else {
					// 默认色
					bgc = 'chengSe'
				}
				return bgc
			}
		}
	}
</script>

<style>
	.page {
		overflow-y: auto;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		padding-bottom: 26rpx;
	}

	.tops {
		width: 706rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Bold, PingFang SC';
		font-weight: bold;
		color: #333333;
		line-height: 33rpx;
		margin: 30rpx auto 0;
	}

	.items {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		height: 139rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}

	.items_left {
		width: 87rpx;
		height: 87rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}

	.items_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}

	.items_right_b {
		margin-top: 14rpx;
		height: 33rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9E9E9E;
		line-height: 33rpx;
	}

	.items_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}

	.chengSe {
		background-color: #F89751;
	}

	.lvSe {
		background-color: #31AB3F;
	}

	.hongSe {
		background-color: #FB5951;
	}

	.heiSe {
		background-color: #361B32;
	}

	.ziSe {
		background-color: #6947DE;
	}
	.banner_right {
		padding: 0 11rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-around;
		/* width: 690rpx; */
		height: 90rpx;
		/* background: #F2F2F2; */
		/* border-radius: 12rpx 12rpx 12rpx 12rpx; */
		/* margin-top: 32rpx; */
		margin: 0 auto 0;
		border-bottom: 2rpx solid #eee;
	}
	
	.banner_right_items {
		text-align: center;
		width: 204rpx;
		height: 100%;
	
		/* border-radius: 12rpx 12rpx 12rpx 12rpx; */
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #202122;
		line-height: 68rpx;
	}
	
	.jisn {
		/* background: #FFFFFF; */
		/* box-shadow: 0rpx 4rpx 5rpx 1rpx rgba(0, 0, 0, 0.06); */
		color: #5885F9;
		border-bottom: 3rpx solid #5885F9;
	}
	
	.search {
		padding: 0 36rpx;
		box-sizing: border-box;
	}
	
	.vitems {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 706rpx;
		/* height: 159rpx; */
		padding: 20rpx 0;
		background: #FFFFFF;
		box-shadow: 0rpx 2rpx 48rpx 1rpx rgba(0, 0, 0, 0.04);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		margin: 26rpx auto 0;
		/* background-color: chocolate; */
	}
	
	.vitems_left {
		width: 99rpx;
		height: 99rpx;
		background: #F89751;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		margin: 0 26rpx 0 26rpx;
		font-size: 50rpx;
		font-family: 'FZZongYi-M05S-Regular, FZZongYi-M05S';
		font-weight: 400;
		color: #FFFFFF;
		line-height: 87rpx;
		text-align: center;
	}
	
	.vitems_right {
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
		width: 527rpx;
		height: 100%;
		/* background-color: red; */
	}
	
	.vitems_right_b {
		margin-top: 11rpx;
		/* height: 29rpx; */
		font-size: 21rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #858585;
		line-height: 29rpx;
	}
	
	.vitems_right_t {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 37rpx;
		height: 37rpx;
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #27292C;
		line-height: 37rpx
	}
	
	.items_leftImg {
		width: 79rpx;
		height: 79rpx;
		margin: 0 26rpx 0 26rpx;
	}
	
	.tow {
		align-items: flex-start;
		padding-top: 16rpx;
		box-sizing: border-box;
		width: 690rpx;
		/* height: 240rpx; */
		padding: 20rpx 0;
	}
</style>